<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style type="text/css">
            .wrapper {
                border: 1px solid blue ; /* 为了看到 .wrapper 区域 故意添加边框 */
                height: 100px ;
            }

            /* 后代选择器 ( 子孙选择器 ) ，一定要注意  前后两个选择器之间的空格 */
            .wrapper .first { height: 100px ; background-color: #efefef ; }
            .wrapper .last { height: 200px ; background-color: #ff8c00 ; }

            /* 当鼠标悬浮到 .wrapper 时，选择隐藏 .last 后代
            .wrapper:hover .last {  display: none ; }
            */

            /* 当鼠标悬浮到 .first 时，就隐藏它的弟弟 */
           .first:hover + .last{ display: none ; }
            /* 使用 + 连接 的属于 兄弟选择器 */

        </style>

    </head>
    <body>

        <div class="wrapper">
            <div class="first"></div>
            <div class="last"></div>
        </div>

    </body>
</html>